﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>订货单订货表</title>

<link type="text/css" rel="stylesheet" href="/css/Choose.css"/>

</head>
<body>

<div class="CartTop">
    <div class="msg1 msg2"></div>
    <!--<div class="clearfix">-->
        <!--<img  class="shoppingCart left" src="/images/shoppingCart.png" alt="图片无法展示" width="45" height="45">-->
        <!--<span class="left mycart">订货单订货表</span>-->

    <!--</div>-->
    <div class="StockHead">
        <!--<div th:class="${updateClass }" th:text="${updateMsg }"></div>-->
        <span>请选择商品</span>
    </div>

        <div class="top">
            <form id="chooseForm11" method="post">
            <!--cellpadding表示每个单元格之间的内间距为0，-->
                <table class="providerTable" cellpadding="0" cellspacing="0">
                    <tr class="firstTr">
                        <th>选择</th>
                        <th width="8%">编号<span></span></th>
                        <th width="22%" class="names">商家名称<span></span></th>
                        <th width="10%">商品编号<span></span></th>
                        <th width="12%">商品名称<span></span></th>
                        <th width="8%">价格</th>
                        <th width="15%">商品数量</th>
                        <th width="15%">商品描述<span></span></th>
                        <th width="20%">金额小计(元)</th>
                    </tr>

                <tr th:each="t,line : ${paCommodity.items}" class="input_sk">
                    <th><input type="checkbox" th:value="${line.count}" class="checkboxs"></th>
                    <th><input th:value="${line.count}" disabled></th>
                    <th><input th:value="${t.provider.name}" class="names" disabled></th>
                    <th><input th:value="${t.id }" th:name="id" disabled></th>
                    <th><input th:value="${t.name }" th:name="name" class="namess" disabled></th>
                    <th><input th:value="${t.price }"  class="oneprice"  th:name="price" disabled></input></th>
                    <th>
                        <span class="button-mm1" id="button"><img src="/images/plus.png" width="15" height="15" alt="加载失败" ></span>
                        <input name="pageIndex" class="inputCount" value="1" th:name="amonut" disabled onkeyup="return ValidateNumber($(this),value)" >
                        <span class="button-mm2"><img src="/images/Less.png" width="15" height="15" alt="加载失败"></span>
                    </th>
                    <th><input th:value="${t.describes }" th:name="describes" class="describes" disabled></th>
                    <th class="price"></th>
                </tr>
            </table>
            </form>

        </div>
        <div class="under">
            <div>
                <div class="left">
                    <label><input type="checkbox" id="selectAll" />全选</label>
                </div>
                <!--.clearfix:,清理浮动-->
                <p class="clearfix">
                    <span>&nbsp;&nbsp;元</span>
                    <span  class="left" id="totalPrices"></span>
                    <span class="left">商品总金额:</span>
                </p>
            </div>
        </div>
            <div class="button-bar clearfix">
                <button class="button-btn" id="button-btn" name="add">加入购物车</button>
                <button class="button-btn">结算</button>
            </div>
    <div class="page-bar">
        <ul class="pageIndex">
            <li th:object="${paCommodity}">
                <span th:text="|共*{count}条记录|"></span>&nbsp;&nbsp;
                <span th:text="|*{curr}/*{total}|"></span>
            </li>&nbsp;&nbsp;

            <a href="javascript:void(0)" name="test">首页</a>
            <a href="javascript:void(0)" name="test">上一页</a>
            <a href="javascript:void(0)" name="test">下一页</a>
            <a href="javascript:void(0)" name="test">尾页</a> &nbsp;&nbsp;
        </ul>
        <span class="page-go-form">
			<label>跳转至</label>
			<input type="text" name="inputPage" id="inputPage" class="page-key"
                   th:value="${paCommodity.curr }"/>页
			<button type="button" class="page-btn">GO</button>
		</span>
    </div>
</body>

<script src="/js/jquery-2.2.1.min.js"></script>
<script src="/js/jump.js"></script>
<script>
    $(".update-suc,.update-err").slideUp(1000*2);
</script>
<script type="text/javascript" th:inline="javascript">



    /*分页开始*/
    /* thymeleaf的js中, 获取后台数据 */
    var curr = [[${paCommodity?.curr ?: 1}]];
    var total = [[${paCommodity?.total ?: 0}]];

    // alert(curr + " : " + total)

    //判断, 是否是第一页
    if(curr == 1){
        $(".pageIndex a:lt(2)").hide();
    }
    //判断, 是否是最后一页
    if(curr == total){
        $(".pageIndex a:gt(1)").hide();
    }

    $(".pageIndex a:eq(0)").bind("click", function() {

        location = "/lookCommodity/query", $("#chooseForm11").serialize() + "&curr=1"
        // toJump("/lookCommodity/query", $("#chooseForm11").serialize() + "&curr=1"+"&column="+[[${orderInfo?.column ?: ""}]]
        //     +"&state="+[[${orderInfo?.state ?: ""}]]);
    });
    $(".pageIndex a:eq(1)").bind("click", function() {
        location = "/lookCommodity/query?"+$("#chooseForm11").serialize()+"&curr=[[${paCommodity.curr-1}]]"
        // toJump("/lookCommodity/query", $("#chooseForm11").serialize() + "&curr=[[${paCommodity.curr-1}]]"+"&column="+[[${orderInfo?.column ?: ""}]]
        //     +"&state="+[[${orderInfo?.state ?: ""}]]);
    });
    $(".pageIndex a:eq(2)").bind("click", function() {
        location = "/lookCommodity/query?"+$("#chooseForm11").serialize()+"&curr=[[${paCommodity.curr+1}]]"
        // toJump("/lookCommodity/query", $("#chooseForm11").serialize() + "&curr=[[${paCommodity.curr+1}]]"+"&column="+[[${orderInfo?.column ?: ""}]]
        //     +"&state="+[[${orderInfo?.state ?: ""}]]);
    });
    $(".pageIndex a:eq(3)").bind("click", function() {
        alert("[[${paCommodity.total}]]");
        location = "/lookCommodity/query?"+$("#chooseForm11").serialize() + "&curr=[[${paCommodity.total}]]";
        // toJump("/lookCommodity/query", $("#chooseForm11").serialize() + "&curr=[[${paCommodity.total}]]"+"&column="+[[${orderInfo?.column ?: ""}]]
        //     +"&state="+[[${orderInfo?.state ?: ""}]]);
    });






    $(".page-go-form .page-btn").bind("click", function() {
        //获取跳转目标页码
        var target = $(".page-go-form .page-key").val();

        //判断, target的值是否符合数值格式
        if(!/^\d+$/.test(target)) {
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //判断, target是否在合理的范围内
        if(target == curr || target < 1 || target > total){
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //跳转
        toJump("/lookCommodity/query", $("#chooseForm11").serialize() + "&curr="+target+"&column="+[[${orderInfo?.column ?: ""}]]
            +"&state="+[[${orderInfo?.state ?: ""}]]);
    });









    var checkboxSwitch=true;//当它的值为true时就需要改变全选框
        var checkbox=document.getElementsByClassName("checkboxs");
    function judgeCheckbox(){
        $.each($(".checkboxs"),function(index,item){
            if(!item.checked){
                checkboxSwitch=false;
            };
         });
        if (checkboxSwitch) {
            $("#selectAll").attr("checked","true");
        }else{
            $("#selectAll").attr("checked","false");
        };
    };
$("#selectAll").on("click",function (){
       // var checkboxs=$(".checkboxs")
       console.log(this);
       if(this.checked){
           $.each($(".checkboxs"),function(index,item){
           item.checked=true;
           var listInput=$(".input_sk").eq(index).children().children("input");
           console.log(listInput);
               $.each(listInput,function(index,item){
                   if(index>0){
                       item.disabled=false;
                   }

               })
            });
       }else{
           $.each($(".checkboxs"),function(index,item){
               item.checked=false;
               var listInput=$(".input_sk").eq(index).children().children("input");
               $.each(listInput,function(index,item){
                   if(index>0){
                       item.disabled=true;
                   }

               })
           });
       }

   })


//判断多选框是否为选中状态
$(".checkboxs").each(function(index,item){
    $(item).on("click",function(){
        $("#selectAll").attr("checked",true);
        for(var i=0;i<checkbox.length;i++){
            if (!checkbox[i].checked) {
                $("#selectAll").attr("checked",false);
                 break;
                  }
        }
        console.log( $("#selectAll"));
        // console.log($(this).parent().nextAll().children("input"));
        var inputList=$(this).parent().nextAll().children("input");
        if(this.checked){
            $.each(inputList,function(index,item){
                item.disabled=false;
            })
        }else {
            $.each(inputList,function(index,item){
                item.disabled=true;
            })
        }

    })
});




    //自动加载事件
    $(document).ready(function(){
        // var onepriceArray=[];

        var p1=0;
        var oneprices=document.getElementsByClassName("oneprice");
        var prices=document.getElementsByClassName("price");
       for(var i=0;i<oneprices.length;i++){
           // onepriceArray.push(oneprices[i].value);
           $(prices[i]).text(oneprices[i].value);
           var pp=Number(oneprices[i].value);
            p1 += pp;
         }
       // alert(p1);
       $("#totalPrices").html(p1.toFixed(2));
       // console.log(onepriceArray);

    });



    // 给按钮绑定事件，格式就是这样子的，name或者value都要用中括号包起来！
    $("#button-btn").bind("click",function () {

        //tojump方法进行跳转，并且携带数据过去,首先是跳转的路径，跳到controller的哪个方法
        //后面可以携带数据，也可以不携带数据，
        //当然网页之间传输数据，需要进行序列化，保证数据的统一
            var $checkbox = $(".checkboxs:checked");
            if($checkbox.length==0){
                alert("您还没有选购商品！")
            }else{

                // $checkbox.each(function (i) {
                //     gg[i] = $(this).val();
                //     alert(gg)
                // })
                // toJump("/lookCommodity/addshopping",$("#chooseForm11").serialize());
                location="/lookCommodity/addshopping?"+$("#chooseForm11").serialize();
            }


    });



//<!--给按钮绑定事件-->
$(".button-mm1").each(function(index,item){
    $(item).on("click",function () {

        var index = $(this).next().val();
        index++;
        $(this).next().val(index);
        if(index >= 100){

            //当大于100数量的时候，禁用加号按键
            $(this).attr("disabled", true);
            alert("数量最大为100")
        }
        if(index <= 100){
            //当然，当小于等于100的时候，给减号解除禁用
            $(this).next().next().attr("disabled", false);
        }
        var _this=$(this)
        calculate(_this);
    });
})

    $(".button-mm2").each(function (index,item) {
        $(item).on("click",function () {

            var index = $(this).prev().val();
            index--;
            $(this).prev().val(index);
            if(index <= 1){

                //index小于1，就引用
                $(this).attr("disabled", true);
                $(this).prev().val(1);
                alert("至少为1个！")
            }
            if (index <= 100){
                //同时解除加号禁用
                $(this).prev().prev().attr("disabled", false);
            }
            var _this=$(this)
            calculate(_this);
        });
    })


    //绑定鼠标移出事件
$(".inputCount").each(function (index,item) {
    $(item).mouseleave(function () {
    var count = $(this).val();
        if(count >= 100){

            $(this).val(100);
            $(this).prev().attr("disabled", true);
            $(this).next().attr("disabled", false);
            alert("不能超过100！");
        }else if (count < 1){

            $(this).val(1);
            $(this).next().attr("disabled", true);
            $(this).prev().attr("disabled", false);
            alert("数量至少为1个！");
        }else if(count<100&&count>=1){
            $(this).prev().attr("disabled", false);
            $(this).next().attr("disabled", false);
        }
        var _this=$(this)
        calculate(_this);

    })
})


//计算金额小计
function calculate(_this) {
    //获取父级元素节点>>>上一个同级元素节点.prev()
    var p=_this.parent().prev().children(".oneprice").val();
    // alert(p);
    var b=_this.parent().children(".inputCount").val();
    _this.parent().nextAll(".price").text(p*b);
    var prices=document.getElementsByClassName("price");
    var pp=0;
    for(var i=0;i<prices.length;i++){
        pp+=Number($(prices[i]).text());
    };
    $("#totalPrices").text(pp.toFixed(2));

}


//限制只能输入数字
    function ValidateNumber(e, pnumber) {
        if (!/^\d+$/.test(pnumber)) {

            $(e).val(/^\d+/.exec($(e).val()));

        }
        return false;
    }


    //给按钮添加加速效果

    // var c = 0;
    // var tid;
    // var btn = window.document.getElementById("button");
    // btn.onclick = function(e){
    //     c++;
    //     $(".inputCount").val(c);
    // };
    // btn.onmousedown = function(e){
    //     tid = setInterval(function(){
    //         c++;
    //         $(".inputCount").val(c);
    //     },100);
    // };
    // btn.onmouseup = function(e){
    //     $(".inputCount").val(c);
    // }
    // btn.onmouseout = function(e){
    //     clearInterval(tid);
    //  }




</script>
</html>